<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Title</title>
        <style>
            li{
                list-style: none;
            }

            #rs{
                background-color: #eeeeee;
                width: 283px;
                max-height: 81px;
                border: 6px solid #cccccc;
                border-top: 0px;
                padding: 0px 3px;
                position: relative;
                top: -1px;
                box-shadow: 5px 5px 10px;
                overflow: auto;
                display: none;
            }


        </style>

        <script>
            function query(){
                var key=document.getElementById("key").value;

                var rs=document.getElementById("rs");

                if(""==key){
                    rs.style.display="none";
                    return;
                }

                rs.innerHTML="";

                var xmlHttpRequest=new XMLHttpRequest();





                xmlHttpRequest.onreadystatechange=function(){
                  if(xmlHttpRequest.readyState==4){

                      var result=xmlHttpRequest.responseText;

                      var dataList=eval("("+result+")");


                      if(dataList.length==0){
                          rs.style.display="none";
                          return;
                      }

                      rs.style.display="block";

                      for (var i = 0; i < dataList.length; i++) {
                          rs.innerHTML=rs.innerHTML+"<li onmouseover='selected(this);' onmouseout='out(this);' onclick='get(this);'>"+dataList[i].message+"</li>"
                      }


                  }
                };







                xmlHttpRequest.open("post","${pageContext.request.contextPath}/query",true);

                xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");

                xmlHttpRequest.send("key="+key);

            }

            function selected(li){
                li.style.backgroundColor="#ffee99";
            }
            function out(li){
                li.style.backgroundColor="#eeeeee";
            }

            function get(li){
                document.getElementById("key").value=li.innerHTML;
                document.getElementById("rs").innerHTML="";
                document.getElementById("rs").style.display="none";
            }
        </script>

    </head>
    <body>
        <input  id="key" type="text" name="key" style="width: 301px;" autocomplete="off" onkeyup="query();"/>
        <div id="rs">
        </div>
    </body>
</html>
